// 单行注释

/*
    多行注释
*/

// 简单变量
@width:100px;
@height:200px;
@bgColor:#ccc;
@border-radius:5px;
@border:1px solid red;

.d1{
    width: @width;
    height: @height;
    background: @bgColor;
    border-radius: @border-radius;
    border: @border;
}

.d2{
    width: @width;
    height: @height;
    border: @border;
    background: pink;
}

// 选择器变量
@sel1:d3;
.@{sel1}{
    background: #999;
}
#@{sel1}{
    background: red;
}

// URL变量
@imgPath:"../images";
.d1{
    background: url("@{imgPath}/p1.jpg"); // 路径必须使用引号引起来，否则不解析
}

// 属性变量
@prop1:color;
.p1{
    @{prop1}:red;
}
.p2{
    @{prop1}:blue;
}

// 变量的嵌套
@aaa:50px;
// @bbb:aaa;
@bbb:@aaa;
.p3{
    // font-size: @@bbb;
    font-size: @bbb;
}


/*
    变量的特性
*/ 
// 1.变量具有作用域：全局变量、局部变量
@color:red; // 全局变量
.p1{
    color: @color;
    @line:underline; // 局部变量
    text-decoration: @line; 
}
.p3{
    color: @color;
    // text-decoration: @line; 
}

// 2.变量提升，也称为变量懒加载
.p3{
    font-family: @family;
}
@family:宋体;

// 3.变量的默认值
@ddd:underline;
.p3{
    text-decoration: @ddd;
    @ddd:overline;
}
.d1{
    text-decoration: @ddd;
}


